<template>
    <button
      @click="triggerClick"
      :style="{'font-size': sizeList[size],
      'border-radius' : $attrs.round !== undefined ? '1.43em' : '4px' }"
      :class="[`el-button el-button__default`,{[`el-button__${type}`]: type}]">
      <span>
        <slot></slot>
      </span>
    </button>
</template>

<script>
/* eslint-disable no-console */
export default {
  name: 'el-button',
  props: {
    type: {
      type: String,
      validator(value) {
        return ['primary', 'success', 'info', 'warning', 'danger', 'default'].indexOf(value) > -1;
      },
    },
    size: {
      type: String,
      validator(value) {
        return ['mini', 'small', 'middle'].indexOf(value) > -1;
      },
    },
  },
  methods: {
    triggerClick() {
      this.$emit('click');
    },
  },
  data() {
    return {
      sizeList: {
        mini: '10px',
        small: '13px',
        middle: '16px',
      },
    };
  },
  mounted() {
    console.log(this.$attrs.round !== undefined);
  },
};
</script>

<style lang="scss" scoped>
  $primary: #409eff;
  $warning: #e6a23c;
  $danger: #f56c6c;
  $info: #909399;
  $success: #67c23a;
  $ratio: 1.08;
.el-button{
  cursor: pointer;
  outline: none;
  border-radius: 4px;
  text-align: center;
  line-height: 2.85714;
  padding: 0 1.5em;
  overflow: hidden;
}
/*[class^=el-button__]{*/
  /*color: #fff;      !*选中以el_button开头的class名*!*/
/*}*/
.el-button__default{
  color: #606266;
  border: 1px solid  #dcdfe6;
  font-size: 14px;
  background: #fff;
  &:hover{
    background: #ecf5ff;
    color: $primary;
    border-color: #b3d8ff;
  }
  &:active{
    border-color: $primary;
  }
}
.el-button__primary{
  color: #fff;
  border: 1px solid  $primary/$ratio;
  font-size: 14px;
  background: $primary;
  &:hover{
    background: $primary*$ratio;
    border-color: $primary/$ratio;
    color: #fff;
  }
  &:active{
    background-color: $primary/$ratio;
  }
}
.el-button__warning{
  border: 1px solid  $warning/$ratio;
  font-size: 14px;
  background: $warning;
  color: #fff;
  &:hover{
    background: $warning*$ratio;
    color: #fff;
    border-color: $warning/$ratio;
  }
  &:active{
    background-color: $warning/$ratio;
  }
}
.el-button__danger{
    border: 1px solid  $danger/$ratio;
    font-size: 14px;
    background: $danger;
    color: #fff;
    &:hover{
      background: $danger*$ratio;
      border-color: $danger/$ratio;
      color: #fff;
    }
    &:active{
      background-color: $danger/$ratio;
    }
  }
.el-button__info{
  border: 1px solid  $info/$ratio;
  font-size: 14px;
  background: $info;
  color: #fff;
  &:hover{
    background: $info*$ratio;
    border-color:  $info/$ratio;
    color: #fff;
  }
  &:active{
    background-color: $info/$ratio;
  }
}
.el-button__success{
  border: 1px solid  $success/$ratio;
  font-size: 14px;
  background: $success;
  color: #fff;
  &:hover{
    background: $success*$ratio;
    border-color: $success/$ratio;
    color: #fff;
  }
  &:active{
    background-color: $success/$ratio;
  }
}
</style>
